<template>
    <v-app id="inspire">
            <v-main>
                <v-container
                        class="fill-height"
                        fluid
                >
                    <v-row
                            align="center"
                            justify="center"
                    >
                        <v-col
                                cols="12"
                                sm="8"
                                md="4"
                        >
                            <v-card class="elevation-12">
                                <v-toolbar
                                        color="primary"
                                        dark
                                        flat
                                >
                                    <v-toolbar-title>用户登录</v-toolbar-title>
                                    <v-spacer></v-spacer>
                                </v-toolbar>
                                <v-card-text>
                                    <v-form>
                                        <v-text-field
                                                label="用户名"
                                                name="login"
                                                prepend-icon="mdi-account"
                                                type="text"
                                                :value="loginForm.username"
                                        ></v-text-field>

                                        <v-text-field
                                                id="password"
                                                label="密码"
                                                name="password"
                                                prepend-icon="mdi-lock"
                                                type="password"
                                                :value="loginForm.password"
                                        ></v-text-field>
                                    </v-form>
                                </v-card-text>
                                <v-card-actions>
                                    <v-spacer></v-spacer>
                                    <v-btn color="primary"
                                           :disabled="dialog"
                                           :loading="dialog"
                                           class="white--text"
                                           @click="handleLogin">登录</v-btn>
                                    <v-dialog
                                            v-model="dialog"
                                            hide-overlay
                                            persistent
                                            width="300"
                                    >
                                        <v-card
                                                color="primary"
                                                dark
                                        >
                                            <v-card-text>
                                                正在登录
                                                <v-progress-linear
                                                        indeterminate
                                                        color="white"
                                                        class="mb-0"
                                                ></v-progress-linear>
                                            </v-card-text>
                                        </v-card>
                                    </v-dialog>





                                </v-card-actions>
                            </v-card>
                        </v-col>
                    </v-row>
                </v-container>
            </v-main>
        </v-app>

</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: 'admin',
                    password: '123456'
                }
                , dialog: false,
            }
        },
        created() {

        },
        methods:{
            handleLogin() {
                console.log(this.loginForm);
               this. dialog = true
                this.$http.post('login', this.loginForm).then(res => {
                    if (res.data.meta.status == 200) {
                        let token = res.data.data.token
                        console.log(res)
                        // this.$store.commit('saveUsername', res.data.data.username)
                        window.sessionStorage.setItem('token', token)
                        window.sessionStorage.setItem('username', res.data.data.username)
                        this.dialog = false
                        this.$router.push('/home')

                    }
                    if (res.data.meta.status != 200) {
                        console.log(res.data.meta.msg);
                    }
                })
            },









        },
        watch: {

        },
    }
</script>

<style scoped>

</style>